<template>
    <div>
        <el-alert title="添加商品信息" type="info" show-icon center :closable="false">
        </el-alert>
        <el-steps :space="200" :active="tabPosition - 0" align-center finish-status="success" style="margin:10px 0">
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
            <el-step title="完成"></el-step>
        </el-steps>
        <el-form :model="ruleForm" :rules="rules" show-message ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-tabs tab-position="left" :before-leave="beforeLeave" style="height: 100%;" v-model="tabPosition"
                @tab-click="over()">
                <el-tab-pane label="基本信息" name="0">

                    <el-form-item label="商品名称" prop="goods_name">
                        <el-input v-model="ruleForm.goods_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goods_price">
                        <el-input type="number" v-model="ruleForm.goods_price"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" prop="goods_number">
                        <el-input type="number" v-model="ruleForm.goods_number"></el-input>
                    </el-form-item>
                    <el-form-item label="商品重量" prop="goods_weight">
                        <el-input type="number" v-model="ruleForm.goods_weight"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称" prop="goods_cat">
                        <el-cascader v-model="ruleForm.goods_cat" :options="options"
                            :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name' }"
                            @change="handleChange"></el-cascader>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品动态参数" name="1">
                    <many :list="manyList"></many>
                    <!-- <div v-for="(item) in manyList" :key="item.attr_id">
                        <h5 style="margin-bottom: 10px;">{{ item.attr_name }}</h5>
                        <el-checkbox v-model="checkboxGroup" style="margin: 10px 15px;" :label="item1" border checked
                            v-for="(item1, index) in item.attr_vals.split(',')" :key="index"></el-checkbox>
                    </div> -->
                </el-tab-pane>
                <el-tab-pane label="商品静态属性" name="2">
                    <div v-for="(item) in onlyList" :key="item.attr_id">
                        <h5 style="margin: 10px 0;">{{ item.attr_name }}</h5>
                        <el-input v-model="item.attr_vals" placeholder="请输入内容"></el-input>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="商品图片" name="3">
                    <el-form-item label="商品图片" prop="pics">
                        <el-upload class="upload-demo" action="/api/upload" :http-request="handleRequest" :headers="headers"
                            :on-success="handleSuccess" :on-preview="handlePreview" :on-remove="handleRemove"
                            :file-list="ruleForm.pics" list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>

                        </el-upload>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品内容" name="4">
                    <el-form-item style="margin-left: -60px;">
                        <quill-editor v-model="ruleForm.goods_introduce" ref="myQuillEditor">
                        </quill-editor>
                        <el-button type="primary" @click="add('ruleForm')" style="margin-top: 20px;">添加</el-button>
                    </el-form-item>
                </el-tab-pane>

            </el-tabs>
        </el-form>
    </div>
</template>
<script>
import { addGoods, categories, tableCategories, uploadd } from '../untils/api'
import { quillEditor } from 'vue-quill-editor'
import _ from 'lodash'
import many from '@/components/many.vue'
export default {
    name: "goodsAdd",
    data() {
        return {
            tabPosition: '0',
            fileList: [],//商品照片
            options: [],
            onlyList: [],
            manyList: [],
            checkboxGroup: [],
            ruleForm: {
                goods_name: '阿贤',
                goods_price: '12354',
                goods_number: '125',
                goods_weight: '30',
                goods_cat: [],
                pics: [],
                goods_introduce: "",
                attrs: []
            },
            headers: {
                Authorzation: sessionStorage.getItem('token') || ''
            },
            rules: {
                goods_name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },

                ],
                goods_price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' },

                ],
                goods_number: [
                    { required: true, message: '请输入商品数量', trigger: 'blur' },

                ],
                goods_weight: [
                    { required: true, message: '请输入商品重量', trigger: 'blur' },

                ], goods_cat: [
                    { required: true, message: '请输入商品分类', trigger: 'blur' },
                ]
            },
        }
    },
    methods: {

        handleRequest(e) {
            console.log(e);
            let formData = new FormData()
            formData.append('file', e.file)
            let { data } = uploadd(formData).catch(err => console.error(err))
            console.log(data);
            // return data
        },
        // 图片上传成功
        handleSuccess(data) {
            // console.log(data);
            // console.log(res, '111'); //res是指handleRequest的返回值
            // let data = res.data
            // let { data } = res;
            // console.log(data, '222');
            // let pic = data.tmp_path
            // let obj = { pic }
            this.ruleForm.pics.push({ pic: data.tmp_path })
        },
        add(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let ruleForm = _.cloneDeep(this.ruleForm)
                    // console.log(ruleForm.goods_cat.join(','));
                    ruleForm.goods_cat = ruleForm.goods_cat.join(',')
                    let manyList = this.manyList.map(item => {
                        return {
                            attr_id: item.attr_id,
                            attr_value: this.checkboxGroup.join(' ')
                        }
                    })

                    // let onlyList=this.onlyList.map(item=>{
                    //     return{
                    //         attr_id:item.attr_id,
                    //         attr_value:this.checkboxGroup.jion(' ') 
                    //     }
                    // })
                    ruleForm.attrs = manyList.push(...this.onlyList)
                    addGoods({ ...ruleForm }).then(res => {
                        // console.log(res);
                        if (res.data.meta.status == 201) {
                            this.$router.push('/goods')
                            this.$refs[formName].resetFields();
                            return false
                        }
                        if (res.data.meta.status == 400) {
                            this.tabPosition = "4"
                            return false
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        beforeLeave(to, from) {
            // console.log(to,from);
            if (from == 0 && this.ruleForm.goods_cat.length < 3) {
                this.$message({
                    type: 'warning',
                    message: '请先完善表格信息,商品分类必须是三级'
                });
                return false
            }
            if (to == 1) {
                let num = Number(this.ruleForm.goods_cat[2])
                tableCategories({ id: num, sel: 'many' }).then(res => {
                    // console.log(res.data.data);
                    //    res.data.data.forEach(item => {
                    //     this.manyList = item.split(',')
                    //    })
                
                    this.manyList = res.data.data
                    // console.log(this.manyList);
                })
            }
            if (to == 2) {
                let num = Number(this.ruleForm.goods_cat[2])
                tableCategories({ id: num, sel: 'only' }).then(res => {
                    // console.log(res);
                    this.onlyList = res.data.data
                })

            }
        },
        handleChange(value) {//选择器
            // console.log(value);
        },
        //添加照片
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        handlePreview(file) {
            // console.log(file);
        },
        over() {


        },
        onEditorChange(event) {

        }
    },
    mounted() {
        categories().then(res => {
            // console.log(res);
            this.options = res.data.data
        })
    },
    components: {
        quillEditor,
        many
    }

}
</script>
<style lang="scss" scoped></style>


